<template>
  <CommonDialog
    :visible.sync="dialogVisible"
    :title="currentConfig.title"
    :buttons="currentConfig.buttons"
    @button-click="handleButtonClick"
    @close="handleClose"
    :closeable="type !== 'language'">
    <div class="text-center">
      <!-- 评价订单弹框的自定义内容 -->
      <div v-if="type === 'review'" class="text-gray-600 text-sm leading-relaxed">
        <p>{{ $t('home.dialog.tip.reviewDesc1') }}</p>
        <p>{{ $t('home.dialog.tip.reviewDesc2') }}{{ 150 }}{{ $t('home.dialog.tip.reviewDesc3') }}</p>
        <p class="text-xs text-gray-500">({{ $t('home.dialog.tip.reviewDesc4') }} RM1.50 {{ $t('home.dialog.tip.reviewDesc5') }} )</p>
      </div>
      <div v-else-if="type === 'language'" class="text-gray-600 text-sm leading-relaxed">
        <p>
          请选择您希望使用的语言
          <br />
          Welcome to yoyotravel! Please select your preferred language
        </p>
      </div>
      <div v-else-if="type === 'password'" class="text-gray-600 text-sm leading-relaxed">
        <p>{{ $t('home.dialog.tip.passwordDesc') }}</p>
      </div>
    </div>
  </CommonDialog>
</template>

<script>
import CommonDialog from "../CommonDialog.vue"

export default {
  name: "TipDialog",
  components: {
    CommonDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      required: true,
      validator: (value) => ["language", "password", "review"].includes(value),
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit("update:visible", value)
      },
    },
    currentConfig() {
      const configs = {
        language: {
          title: "欢迎来到yoyotravel!",
          buttons: [
            { text: "简体中文", type: "secondary", action: "chinese" },
            { text: "en English", type: "primary", action: "english" },
          ],
        },
        password: {
          title: "欢迎来到yoyotravel!",
          buttons: [
            { text: "下次再说", type: "secondary", action: "later" },
            { text: "设置密码", type: "primary", action: "setPassword" },
          ],
        },
        review: {
          title: "您有待评价订单",
          buttons: [
            { text: "我知道了", type: "secondary", action: "later" },
            { text: "立即评价", type: "primary", action: "review" },
          ],
        },
      }

      return configs[this.type] || configs.language
    },
  },
  methods: {
    handleButtonClick(data) {
      // 转发按钮点击事件给父组件
      this.$emit("button-click", data)
    },

    handleClose() {
      this.$emit("close")
    },
  },
}
</script>
